<template>
  <div class="file_line" :class="noborder?'noborder':''">
    <div class="file_title" :class="boldtitle ? 'bold_title' : ''">{{label}}</div>
    <div class="file_values">
      <div class="file_value" v-for="item,index in fileitems" :key="index">
        <div class="file_name">
          <span class="iplodimg">
            <a v-if="(item.cFileDescr == 'JPG') || (item.cFileDescr == 'PNG') || (item.cFileDescr == 'PDF') || (item.cFileDescr=='TXT') || (item.cFileDescr=='JPEG')" href="javascript:;" @click="showItemClick(index)">{{item.attachuserfile}}</a>
            <a v-else="" :href="item.fileUrl">{{item.attachsysfilename}}</a>
            <img class="delicon" v-if="editing" @click="delImg(item.seqnbr)" src="./images/delfil.png">
          </span>
        </div>
      </div>
    </div>
      <div class="wrap-load" v-if="editing"> <!-- v-if="edit"> -->
        <div class="upload-part">
          <img src="./images/addfils.png">
          <input @change="uploadFile" type="file" name="file" id="file" accept="image/*">
        </div>
      </div>
    <show-annex :option="showItem" v-if="showDetail" :hiddenImg="hiddenImg"></show-annex>
  </div>
</template>

<script>
  import {publicUrl} from '../../util/http'
  import { imgPreview, postImg } from "../../util/uploadImg";
  import {delWfFile} from "../../api/api"
  export default {
    name: 'file-line',
    props: {
      label: {
        type: String,
        default: ''
      },
      fileitems: {
        type: Array,
        default: function(){
          return []
        }
      },
      important: {
        type: Boolean,
        default: false
      },
      noborder: {
          type: Boolean,
          default: false
      },
      boldtitle : {
        type: Boolean,
        default: false
      },
      show: {
        type: Boolean,
        default: true
      },
      cTransactionNbr : {
        type: String,
        default: ''
      },
      onUploaded: {
        type:Function,
        default: (cTransactionNbr) => {
          return {}
        }
      },
      editing: {
        type: Boolean,
        defalut: false
      }

    },
    beforeUpdate(){
      if(this.fileitems) {
        this.fileitems.forEach(f => {
          if((!f.cFileDescr || !f.cFileDescr.trim()) && f.attachuserfile){
            f.cFileDescr = f.attachuserfile.slice(f.attachuserfile.lastIndexOf(".")+1, f.attachuserfile.length);
            console.info(f.cFileDescr)
          }
          if(f.cFileDescr) {
            f.cFileDescr = f.cFileDescr.toUpperCase()
          } else {

          }
        });
      }
    },
    mounted() {
    },

    data() {
      return {
        showItem: {},
        showDetail: false,
      }
    },
    methods:{
      showItemClick(idx){
        this.showItem = this.fileitems[idx];
        this.showDetail = true;
      },
      hiddenImg() {
        this.showDetail = false;
      },
      delImg(seq) {
        delWfFile(
          qs.stringify({ cTransactionNbr: this.cTransactionNbr, seqnbr: index })
        )
        .then(res => {
          if (res.retCode === "000000") {
            const newList = [];
            this.fileList.map(item => {
              if (item.seqnbr != index) newList.push(item);
            });
            this.fileList = newList;
            this.$vux.alert.show({
              title: "提示",
              content: "删除成功"
            });
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(e => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "提示",
            content: "上传失败"
          });
        });
      },
      downloadFile(url) {
        let form = document.createElement('form');
        form.action = url;
        form.method = 'get';
        document.body.appendChild(form);
        form.submit();
        form.remove();
        this.$vux.alert.show({
          title: "提示",
          content: "文件下载成功！"
        });
      },
      uploadFile(e) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        let picValue = files[0];
        this.$vux.loading.show({
          text: "上传中"
        });

        imgPreview(picValue).then(imgRes => {
          postImg(imgRes, this.cTransactionNbr, this.cWfType, picValue.name)
            .then(res => {
              this.$vux.loading.hide();
              if (res.retCode === "000000") {
                this.cTransactionNbr = res.retData.cTransactionNbr;
                this.onUploaded(res.retData.cTransactionNbr)
                this.fileitems.push(res.retData.fileitem);
                this.$vux.alert.show({
                  title: "提示",
                  content: "上传成功"
                });
              } else {
                this.$vux.alert.show({
                  title: "提示",
                  content: res.retMsg
                });
              }
            })
            .catch(e => {
              this.$vux.loading.hide();
              this.$vux.alert.show({
                title: "提示",
                content: "上传失败"
              });
            });
        });
      },
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .file_line {
    width: 100%;
    padding: 7px 0;
    line-height: 26px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    position: relative;
    &.noborder{
        border-bottom: none;
    }
    .file_important{
        color: red;
    }
    .file_title {
      width: 16%;
      text-align: right;
      float: left;
      padding-right: 10px;
      &.bold_title{
        font-weight: 600;
      }
    }
    .file_values{
      width: 80%;
      float: left;
      text-align: left;
      .file_value {
        .filname{
          .delicon{
            display:inline-block;
            width: 25px;
            padding-left: 5px;
          }
          span{
            margin-bottom: 7px;
          }
          .dingwei{
            position: relative;
          }
          .deliconimg{
            position: absolute;
            top: -92px;
            right: 0px;
          }
        }
      }
    }
    .wrap-load{
      padding:20px;
      .upload-part{
        position: relative;
        width: 64px;
        height: 64px;
        margin:20px 0 20px 120px;
      }
      .upload-part img{
        float: left;
        width: 64px;
      }
      .upload-part input{
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 64px;
        height: 64px;
      }
    }
  }
</style>
